import QtQuick 2.2
import QtQuick.Window 2.1

Window {
    visible: true
    width: 1400
    height: 1000

    Rectangle {
        anchors.fill: parent;

        Text {
            id: heading;
            anchors.centerIn: parent;
            text: "Hello QtQuick";
            font{
                pixelSize: 40;
                family: "微软雅黑";
                weight: Font.Light;
            }
            color: "skyblue";
        }

        Component {
            id: colorComponent;
            Rectangle {
                id: colorPicker;
                width: 150;
                height: 80;
                signal colorPicked(color clr);
                MouseArea {
                    anchors.fill: parent;
                    onPressed: {
                        colorPicker.colorPicked(colorPicker.color);
                        colorPicker.border.width = 2;
                        colorPicker.border.color = "white";
                    }
                    onReleased: {
                        colorPicker.border.width = 1;
                        colorPicker.border.color = colorPicker.color;
                    }
                }
            }
        }

        Loader {
            id: loader1;
            anchors.left: parent.left;
            anchors.leftMargin: 10;
            anchors.bottom: parent.bottom;
            anchors.bottomMargin: 10;
            sourceComponent: colorComponent;
            onLoaded: {
                item.color = Qt.rgba(Math.random(), Math.random(), Math.random());
            }
        }

        Loader {
            id: loader2;
            anchors.left: loader1.right;
            anchors.leftMargin: 10;
            anchors.verticalCenter: loader1.verticalCenter;
            sourceComponent: colorComponent;
            onLoaded: {
                item.color = Qt.rgba(Math.random(), Math.random(), Math.random());
            }
        }

        Connections {
            target: loader1.item;
            onColorPicked: {
                heading.color = clr;
            }
        }

        Connections {
            target: loader2.item;
            onColorPicked: {
                heading.color = clr;
            }
        }

    }
}
